<template>
	<view class="research">
		<div class="left">
			<el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				
				<!-- 编辑左侧列表 -->
				<el-menu-item index="market">
					<!-- 小图标 -->
					<i class="el-icon-menu"></i>
					<!-- 列表文字 -->
					<span slot="title">市场表现研究</span>
				</el-menu-item>
				
				
			</el-menu>
		</div>
		<div class="right">
			<market v-if="active == 'market'"></market>
		</div>
	</view>
</template>

<script>
export default {
	name: 'research',
	data() {
		return {
			active: ''
		};
	},
	methods: {
		handleSelect(key) {
			this.active = key;
		}
	}
};
</script>

<style lang="less">
.research {
	display: flex;
	justify-content: space-between;
	height: 100%;
	.left {
		height: 100%;
		width: 15vw;
		background-color: #545c64;
	}
	.right {
		height: calc(100% - 40px);
		width: 85vw;
		padding: 0 20px;
		margin-top: 20px;
		box-sizing: border-box;
		overflow-y: scroll;
	}
}
</style>
